<template>
  <div :class="position">
    <!-- 聊天人员信息展示 -->
    <div class="flex gap-2">
      <Avatar :image="userInfo.avatar" shape="circle" />
      <span class="">{{ userInfo.username }}</span>
      <span class="text-xs mt-1">{{ userInfo.time }}</span>
    </div>
    <!-- 聊天内容展示 -->
    <div class="content mt-1" style="white-space:pre-wrap;">{{ replaceTextarea(props.content) }}</div>
  </div>
</template>

<script setup lang="ts">
import { Avatar } from '@/utils/primevue'
import { replaceTextarea } from '@giteeygl/utils'
import { computed } from 'vue';
import dayjs from 'dayjs';
import useChatStore from '@/stores/chat'

const chatStore = useChatStore()

type TProps = {
  avatar: string,
  username: string,
  content: string,
  isTo: boolean, //是否是发送给朋友的，是：聊天记录在右边，否则在左边
  createTime?: Date
}

const props = defineProps<TProps>()

const position = computed(() => {
  console.log('*********', props.isTo)
  const classStr = 'mt-1 '
  const p = props.isTo ? 'align-self-end' : 'align-self-start'
  return classStr + p
})

const userInfo = computed(() => {
  return {
    time: dayjs(props.createTime).format('YYYY-MM-DD HH:mm:ss'),
    avatar: props.isTo ? chatStore.user.avatar : props.avatar,
    username: props.isTo ? chatStore.user.username : props.username
  }
})
</script>

<style scoped>
.content {
  font-size: 14px;
  padding: 6px;
  background-color: #0c0a0a54;
  border-radius: 4px;
  width: fit-content;
}
</style>
